<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid #ccc;
            /* border-radius: 50%; */
        }
    </style>
</head>

<body>
    <canvas width="600" height="600" id="canvas"></canvas>

    <button id="test">
        T
    </button>
    <div></div>
    <script>

        const btn = document.getElementById("test");

        const randomColor = () =>
            "#" + Math.round(Math.random() * 0xffffff).toString(16);

        const canvas = document.getElementsByTagName("canvas")[0];
        const ctx = canvas.getContext("2d");

        const { PI } = Math;

        const canvasWidth = 600;//转盘长款宽一致
        const halfCanvasWidth = canvasWidth / 2;//宽度的一半 用于圆心，半径等

        // ctx.translate(halfCanvasWidth, halfCanvasWidth);
        const l = 8;
        draw(8);
        const r = PI / l;
        let ii = 0;


        btn.onclick = () => {
            console.log(ii);
            ctx.beginPath();
            !ii &&
                ctx.translate(halfCanvasWidth, halfCanvasWidth);
            ctx.translate(0, 0);
            ctx.font = "14px 微软雅黑";
            ctx.fillStyle = "#0f0";
            ctx.fillText("Hello", 30, 0);
            ctx.fill();
            ctx.rotate(ii += r);
            ctx.closePath()
        }

        function draw(length) {

            ctx.clearRect(0, 0, canvasWidth, canvasWidth);

            const start = -PI / 2;//绘画的起始点正上方


            const radian = 2 * PI / length;//一个扇形跨越的角度 如 一个选项占360度 两个一个占180度 三个一个120度

            const coordinate = [];//记录右侧选项数值 左侧直接获取相反的值

            const drawSector = (index) => {
                ctx.beginPath();
                ctx.moveTo(halfCanvasWidth, halfCanvasWidth);
                // ctx.fillStyle = randomColor();// 随机颜色
                const up = start + radian * index;// 扇形上边点起点
                ctx.arc(halfCanvasWidth, halfCanvasWidth, halfCanvasWidth, up, up + radian);
                // ctx.fill();

                // TODO 文字
                ctx.closePath();
            }

            for (let i = 0; i < length; i++) {
                drawSector(i);
            }

            //! 后画否则会被前面的覆盖
            // 中心实心圆形
            ctx.beginPath()
            ctx.fillStyle = "#f55";

            ctx.arc(halfCanvasWidth, halfCanvasWidth, 12, 0, 2 * PI);
            ctx.fill();

            ctx.closePath();
        }

    </script>

</body>

</html>
<!-- 
            // const cosC = Math.cos(2 * PI / 360 * radian);
            // // 第三边边长
            // C =  Math.sqrt((halfCanvasWidth * halfCanvasWidth * 2) + (2 * halfCanvasWidth * cosC));
            // console.log(C)
 -->